<template>
  <div>
    <div class="row_head">
      <van-row gutter="20" @click="goto">
        <van-col span="6">
          <img :src="userDetail.headImg" alt />
        </van-col>
        <van-col span="14">
          <h4 style="margin: 5px 0">{{ userDetail.nickname }}</h4>
          <span>微信号：</span>
        </van-col>
        <van-col span="4" class="arrow_head">
          <van-icon name="arrow" />
        </van-col>
      </van-row>
    </div>
    <br />
    <vue-cell title="服务" icon="passed"></vue-cell>
    <br />
    <van-cell-group>
      <van-cell icon="like-o" title="收藏" is-link />
      <van-cell icon="location-o" title="朋友圈" is-link />
      <van-cell icon="coupon-o" title="卡包" is-link />
      <van-cell icon="smile-o" title="表情" is-link />
    </van-cell-group>
    <br />
    <van-cell icon="smile-o" title="设置" is-link />
  </div>
</template>

<script>
import { getUserDetail } from "@/api/request/login";
import VueCell from '@/components/common/VueCell'

import { mapState } from "vuex";
export default {
  components: {VueCell},
  data() {
    return {
      token: localStorage.getItem("token"),
      id: JSON.parse(localStorage.getItem("loginUserInfo")).userId,
      userDetail: {},
    };
  },
  created() {
    this.getUserDetailInfo();
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    getUserDetailInfo() {
      // console.log(this.id);
      getUserDetail(this.id)
        .then((res) => {
          if (res.status === 200) {
            this.userDetail = res.data.data;
            localStorage.setItem("userDetail", JSON.stringify(res.data.data));
          }
        })
        .catch((err) => {
          alert(err);
        });
    },
    goto() {
      this.$router.push("/userDetail");
    },
  },
};
</script>

<style scoped>
.row_head {
  margin-top: 8px;
  background-color: white;
}
.arrow_head {
  height: 64px;
  line-height: 64px;
}
img {
  border: 1px;
  margin: 5px 0 5px 10px;
  height: 50px;
  width: 50px;
}
.van-cell {
  border-top-style: solid;
  border-top-width: 0.1px;
  border-top-color: #f8f8f8;
  border-bottom-style: solid;
  border-bottom-width: 0.1px;
  border-bottom-color: #f8f8f8;
  /* background-color: #f8f8f8; */
}
</style>